<template>
  <el-select
    v-model="curVal"
    class="sz-select"
    :placeholder="placeholder"
    :clearable="clearable"
    :disabled="disabled || readonly"
    :filterable="filterable"
    :multiple="multiple"
  >
    <el-option
      v-for="item in curOptions"
      :key="item.id"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>

<script>
import { deepClone } from "./utils";

export default {
  name: "sz-select",
  props: {
    // 默认值
    value: {
      type: String | Number,
      default: ""
    },
    staticOption: {
      type: Array,
      default: function() {
        return [];
      }
    },
    props: {
      type: Object,
      default: function() {
        return {
          label: "label",
          value: "value"
        };
      }
    },
    optionMethod: {
      type: String,
      default: ""
    }, // 获取option方法
    placeholder: {
      type: String,
      default: "请选择"
    },
    readonly: false, // 只读属性
    isDic: true, // 是否来源数据字典，配合optionMethod的值
    clearable: true,
    disabled: false,
    filterable: false,
    multiple: false
  },
  data() {
    return {
      curVal: deepClone(this.value),
      curOptions: []
    };
  },
  watch: {
    curVal(val) {
      this.$emit("input", val);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.curOptions = [];
      if (this.optionMethod) {
        if (this.isDic) {
          let tem = this.getDictionary(this.optionMethod);
          if (tem) {
            tem.map(item => {
              this.curOptions.push({ label: item.label, value: item.keyword });
            });
          }
        } else {
          this.getOptionData(this.optionMethod);
        }
      } else {
        this.curOptions = this.staticOption;
      }
    });
  },
  methods: {
    // 根据属性method获取数据
    getOptionData(method) {
      this.ExportApi.getSelectData({ path: method }).then(res => {
        if (res.data) {
          res.data.map(item => {
            if (Number.isInteger(this.value)) {
              this.curOptions.push({
                label: item[this.props.label],
                value: item[this.props.value]
              });
            } else {
              this.curOptions.push({
                label: item[this.props.label],
                value: item[this.props.value] + ""
              });
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.sz-select {
  /deep/.el-input__inner {
    background-color: white !important;
  }
}
</style>
